<template>
  <div>
    <h1 v-color="color1">指令的值1测试</h1>
    <h1 v-color="color2">指令的值2测试</h1>
    <input v-model="color1" @keyup.enter="this.color1=$event.target.value"/>
  </div>
</template>

<script>
/*
自定义指令 - 指令的值
  需求:实现一个 color 指令 - 传入不同的颜色，给标签设置文字颜色
  语法:在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值
    <div v-color="color">我是内容</div>
  通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数
    directives: {
      color: {
        inserted (el, binding) {  //元素被添加到页面的适合
          el.style.color = binding.value
        },
        update (el,binding) {    //指令的值被修改的时候被促发
          el.style.color = binding.value
        }
      }
    }
*/
export default {
  data () {
    return {
      color1: 'red',
      color2: 'green',
    }
  },
  directives: {
    color: {
      inserted(el, binding) {
        //el是组件
        //bindding.value是指令等号后面的值
        console.log(el, binding.value)
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      }
    }
  }
}
</script>

<style>

</style>